Three.js を複数回読み込むとモデルを描画できないことがある
問題
モデルが描画できないことがある
A.glb
超越
Chrome 79.0.3945.88で動かないmaku693.icon
Edge Dev 80.0.361.9で動かないmaku693.icon
B.glb
大吉
Firefox Developer Edition 71.0で動かないmaku693.icon
C.glb
吉
Safari 13.0.4で動かないmaku693.icon
コンソールには↓のようなエラーが出ている
code:error
TypeError: value is undefined three.module.js:16190:1
ACCESSOR_NON_UNIT
頂点の法線の長さが1でない(単位ベクトルでない)場合に出るエラー
これが影響しているかは不明 maku693.icon
Degenerate Dissolve するといいという噂
おそらく文字部分にサイズが0のメッシュがあったりするのではないかmaku693.icon
一通り Degenerate Dissolve すると ACCESSOR_NON_UNIT は出なくなったが表示されない場合がある
Make sure you're not importing Three.js twice via includes or require.
…
Two copies of Three.js running simultaneously will attempt to read/write the same buffer attributes and hit something undefined anytime they're accessed from a subsequent include.
これではmaku693.icon
ESMをやめてみる
手元では直ったっぽい :innocent:
原因
Three.jsはブラウザに複数回読み込まれることを想定しておらず、同時に同じバッファに読み書きしようとしていたと思われる
対策
ESM版を無理に使わない